<script>
import { routes } from '@/router/index'
export default {
    name: 'breadcrumb',
    data() {

        // 用来记录所有路由的 name 对应的 label 
        this.routesMap = new Map()

        // 遍历执行 Map 的内容添加
        this.initRoutesMap(routes)

        console.log(1111111, this.routesMap);

        return {
            list: [] // 需要渲染的面包屑数据
        }
    },
    methods: {
        initRoutesMap(routes) {
            routes.forEach(route => {
                // 遍历获取每个路由
                this.routesMap.set(route.name, route.label)
                // 如果有子路由
                if (route.children) {
                    this.initRoutesMap(route.children)
                }
            })
        }
    },
    watch: {
        $route: {
            immediate: true,
            handler(newRoute) {
                console.log(newRoute.matched);
                this.list = newRoute.matched.map(item => {
                    return {
                        name: item.name,
                        label: this.routesMap.get(item.name)
                    }
                })
            }
        }
    }

}

/*
    [
        {
            name: '',
            label: ''
        }
    ]
*/

</script>
<template>
    <el-breadcrumb separator=">">
        <!-- <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item> -->
        <el-breadcrumb-item v-for="item in list" :key="item.name" :to="{ name: item.name }">
            {{ item.label }}
        </el-breadcrumb-item>
    </el-breadcrumb>
</template>
<style scoped lang="scss">
.el-breadcrumb {
    padding: 20px;
    background-color: white;
}
</style>